<template>
  <div>
    <el-dialog
      :title="activityTitle"
      :visible.sync="selfShow"
      top="2rem"
      width="80%">
      <el-table
        :data="items"
        v-loading="loading"
        element-loading-text="数据载入中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255,255,255, 0.4)"
        style="width:100%">
        <el-table-column
          label="标题">
          <template slot-scope="scope">
              {{scope.row.title}}
          </template>
        </el-table-column>
        <el-table-column
          label="上车地址">
          <template slot-scope="scope">
              {{scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column
          label="上车时间">
          <template slot-scope="scope">
              {{scope.row.set_out_time}}
          </template>
        </el-table-column>
        <el-table-column
          label="人数限制">
          <template slot-scope="scope">
              <el-input type="number" v-model="scope.row.sign_up_limit"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selfShow = false">取 消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    groupStageId: {
      type: Number
    },
    show: {
      type: Boolean,
      default: false
    },
    activityTitle: {
      type: String,
      default: '集合点列表'
    }
  },
  data () {
    return {
      items: [],
      loading: false,
      selfShow: false
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.getItems()
      }
      this.selfShow = val
    },
    selfShow (val) {
      if (!val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    /**
     *  保存
     */
    submit () {
      let data = []
      this.items.map(item => {
        data.push({
          id: item.id,
          sign_up_limit: item.sign_up_limit
        })
      })
      this
        .$api
        .activity
        .collectionPointSignUpLimitBatchSet(data)
        .then(r => {
          this.toast('保存成功')
          this.$parent.getItems()
        })
    },
    /**
     * @purpose 获取列表数据
     */
    getItems () {
      this.loading = true
      this
        .$api
        .activity
        .collectionPointItems(this.groupStageId)
        .then(r => {
          this.items = r
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  },
  created () {
  }
}
</script>
<style scoped lang="sass">
  .collection-point
    width: 100%
    height: 100%
  .search
    width: 100%
    margin: 10px 0 20px 0
  .amap
    height: 500px
  .search-box
    position: absolute
    top: 25px
    left: 20px
  .amap-page-container
    position: relative
</style>
